<template>
  <div class="roleUserListBox h100">
    <h3 class="roleUserTitle title16">{{ $t('roleUser') }}</h3>
    <load-data-spin v-if="loadingUserData"></load-data-spin>
    <ul class="roleUserListUl" v-if="userData.length">
      <li class="roleUserItem" v-for="item in userData" :key="item.id">
        <span
          class="circle"
          :style="{ backgroundColor: userColors[item.account.slice(0, 1).toUpperCase()] || '#ccc' }"
        >{{ item.account.slice(0, 1).toUpperCase() }}</span
        >
        <div class="userInfo">
          <p
            class="realName"
          ><table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.name"></table-ellipsis
          ></p>
          <p
            class="userName"
          ><table-ellipsis :tableEllipsisIsTurnLine="false" :text="item.account"></table-ellipsis
          ></p>
        </div>
        <span
          class="bindDate"
        ><table-ellipsis
          :tableEllipsisIsTurnLine="false"
          :text="item.updateTime?
          $t('bindTime') + ':' + $commonFun.getDateTimeStr(item.updateTime):
          $t('bindTime') + ':' + $commonFun.getDateTimeStr(item.createTime)"
        ></table-ellipsis
        ></span>
      </li>
    </ul>
    <empty-notice v-else-if="!loadingUserData && userData.length === 0" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import EmptyNotice from '@/components/EmptyNotice/Index.vue'
import LoadDataSpin from '@/components/LoadDataSpin/Index.vue'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import userApi from "@/api/modules/system/user";
export default {
  components: {
    EmptyNotice,
    LoadDataSpin,
    tableEllipsis
  },
  props:{
    selectedRoleFromU1List:{
      type:Object,
      required:true
    }
  },
  computed: {
    ...mapState({
      loadingUserData: (state) => state.user.loadingUserData,
      userColors: (state) => state.user.userColors
    })
  },
  data () {
    return {
      selectedRole: this.selectedRoleFromU1List,
      userData: {},
      loadingData: true,
      bgs: []
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    selectedRoleFromU1List: {

      handler (val) {
        console.info(1111)
        if (val && val.id) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  methods: {
    getData () {
      const params = { pageNo: 1, pageSize: 9999, roleIds: [this.selectedRoleFromU1List.id] }
      //this.$store.dispatch('getUserPageData', params)
      userApi.getUserPageData(params).then(res => {
        this.userData = res.data
      })
    }
  }
}
</script>

<style scoped lang="less">
.roleUserListBox {
  padding-top: 10px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  .roleUserTitle {
    font-weight: 600;
    margin: 12px 0;
    padding: 0 16px;
  }
  .roleUserListUl {
    flex: 1 0 0;
    overflow: auto;
    padding: 0 24px;
  }
  .roleUserItem {
    display: flex;
    align-items: center;
    height: 40px;
    .circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      line-height: 30px;
      text-align: center;
      color: #fff;
      flex: none;
    }
    .userInfo{
      width: 60px;
      margin: 0 8px;
    }
    .userName {
      flex: 1 0 0;
      width: 100%;
      margin: 0 8px;
    }
    .realName {
      flex: 1 0 0;
      width: 100%;
      margin: 0 8px;
    }

    .bindDate {
      font-size: 10px;
      flex: none;
      max-width: 190px;
    }
  }
}
</style>
